<template>
	<view>
    <u-navbar :fixed="false" title="详情" :autoBack="true" bgColor="transparent"></u-navbar>
    <view class="page">
      <view class="box-title">详情</view>
      <view class="order-info">
        <view class="status" v-if="id">{{ status[form.status] }}</view>
        <view class="item">
          <view class="lable">1：</view>
          <view class="content">
            <input placeholder="请输入" type="text" v-model="form.name" />
          </view>
        </view>
        <view class="item">
          <view class="lable">2：</view>
          <view class="content">
            <text class="content time" @click="pickerType = 'jd'">{{ form.jd || '请选择' }}</text>
          </view>
        </view>
        <view class="item"> 
          <view class="lable">status：</view>
          <view class="content">
            <text class="content time" @click="pickerType = 'status'">{{ form.status || '请选择' }}</text>
          </view>
        </view>
        <view class="item">
          <view class="lable">照片：</view>
          <view class="content" @click="upload">
            <image v-if="!form.url" src="../../static/tianjia.png" mode="aspectFill" style="width: 150rpx;height: 150rpx;">
            </image>
            <image v-else :src="form.url" mode="aspectFill" style="width: 150rpx;height: 150rpx;"></image>
          </view>
        </view>
      </view>
      <view class="btn" @click="submit">保存</view>
    </view>
    <u-picker :show="pickerType!=''" :columns="[pickerInfo[pickerType]]" keyName="name" @confirm="pickerConfirm" @cancel="pickerType = ''"></u-picker>
	</view>
</template>

<script>
import { ENV } from '../../.env'

export default {
  data() {
		return {
      pickerType: '',
      pickerInfo: {
        jd: [
          {
            id: '',
            name: 'all1'
          },
          {
            id: 1,
            name: 'jd1'
          },
          {
            id: 2,
            name: 'jd2'
          },
        ],
        status: [
          {
            id: '',
            name: 'all2'
          },
          {
            id: 1,
            name: 'status1'
          },
          {
            id: 2,
            name: 'status2'
          },
        ],
      },
      form: {
      },
      id: '',
    }
  },
  async onLoad(options) {
    this.id = options.id
  },
  methods: {
    upload() {
      const that = this
      wx.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        camera: 'back',
        success(res) {
          uni.showLoading({
            mask: true
          })
          uni.uploadFile({
            url: ENV.BASE_API + '/mgtTcWxUser/file/upload',
            header: {
              [ENV.HEAD]: uni.getStorageSync('token') || '',
            },
            filePath: res.tempFiles[0].tempFilePath,
            name: 'file',
            success: (ress) => {
              uni.hideLoading();
              that.form.url = JSON.parse(ress.data).data;
            },
            fail: (err) => {
              uni.hideLoading();
              uni.showModal({
                content: err.errMsg,
                showCancel: false
              });
            },
          })
        }
      })
    },
    pickerConfirm(e) {
      if(e.value[0].id) {
        this.form[this.pickerType] = e.value[0].id
        this.form[this.pickerType+'Name'] = e.value[0].name
      } else {
        this.form[this.pickerType] = ''
        this.form[this.pickerType+'Name'] = ''
      }
      this.pickerType = ''
    },
  }
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background: #F9F9F9;
  padding: 20rpx 30rpx 88rpx 20rpx;
}
.box-title {
  padding: 0 10rpx;
  height: 30rpx;
  line-height: 30rpx;
  color: #3467FA;
  font-size: 28rpx;
  border-left: 10rpx solid #3467FA;
}
.order-info {
  margin: 20rpx 0;
  background: #FFF;
  padding: 20rpx 30rpx 140rpx;
  position: relative;
  .item {
    margin-bottom: 36rpx;
    display: flex;
    .lable {
      width: 200rpx;
      color: #333;
      font-family: "PingFang SC";
      font-size: 26rpx;
      letter-spacing: 3rpx;
    }
    .content {
      color: #333;
      font-family: "PingFang SC";
      font-size: 28rpx;
      input {
        border-bottom: 2rpx solid #dadbde;
      }
    }
    .time {
      color: #FF881A;
    }
  }
  .status {
    color: #FF8819;
    font-size: 26rpx;
    position: absolute;
    top: 20rpx;
    right: 30rpx;
  }
}
.goods {
  margin: 20rpx 0;
  background: #FFF;
  padding: 30rpx;
  .table-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    view {
      color: #333;
      font-family: "PingFang SC";
      font-size: 26rpx;
    }
    .name {
      flex: 1;
    }
    .num {
      width: 88rpx;
      text-align: center;
    }
    .spec {
      width: 140rpx;
      text-align: center;
    }
    .price {
      width: 140rpx;
      text-align: center;
    }
    .type {
      width: 72rpx;
      text-align: center;
    }
  }
  .goods-item {
    padding: 20rpx 0;
    border-bottom: 2rpx solid #D4D4D4;
  }
  .goods-item:last-child {
    border: none;
  }
}
.total {
  width: 100%;
  height: 86rpx;
  padding: 0 42rpx;
  display: flex;
  align-items: center;
  background: #E1E9FF;
  .lable {
    width: 118rpx;
    height: 32rpx;
    line-height: 32rpx;
    color: #333;
    font-family: "PingFang SC";
    font-size: 26rpx;
    border-right: 2rpx solid #FFF;
    margin-right: 100rpx;
  }
  .num {
    color: #3F63FA;
    font-family: "PingFang SC";
    font-size: 32rpx;
    margin-right: 80rpx;
  }
  .num:last-child {
    margin: 0;
  }
}
.btn {
  width: 630rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  margin: 72rpx auto 42rpx;
  border-radius: 46rpx;
  background: #2979ff;
  color: #FFF;
  font-family: "PingFang SC";
  font-size: 36rpx;
}
</style>
